<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>live</title>
    <script>
        function getUrlSearch(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        var roomId = getUrlSearch('roomId');
        var userId = parseInt(10000 * Math.random());
        var socket = new WebSocket("ws://127.0.0.1:8080/chat?userId=" + userId + "&roomId=" + roomId);

        //发消息
        function send(message) {
            socket.send(message);
        }

        //收消息
        socket.onmessage = function (ev) {
            //console.log(ev.data);

            var ta = document.getElementById("responseText");
            //显示在页面
            ta.value = ta.value + '\n' + ev.data;
        }

    </script>
</head>
<body>

<table>
    <tr>
        <td>
            <form onsubmit="return false">
                <h3>-----------公屏-----------</h3>
                <textarea id="responseText" rows="10" cols="30"></textarea>

                <h3>-----------发消息-----------</h3>
                <input type="text" name="message" value="Hello, World!"/>
                <input type="button" value="发送" onclick="send(this.form.message.value)"/>
            </form>
        </td>
    </tr>
</table>

</body>
</html>